<template>
  <view class="ikz-school">
    <ikz-loading :css-data="loading_css"></ikz-loading>

    <!-- type == 1 -->
    <block v-if="form_data.type == 1">
      <view class="ikz-address ikz-after">
        <image class="ikz-address-icon" src="/static/getorder/address.png" />
        <view class="ikz-address-box">
          <view class="ikz-address-title">
            {{address_default.name}} {{address_default.mobile}}
          </view>
          <view class="ikz-address-tips">
            {{address_default.group_name}} {{address_default.detail}}
          </view>
        </view>
      </view>
      <view class="ikz-address ikz-after">
        <image class="ikz-address-icon" style="width: 40rpx;" src="/static/getorder/time.png" />
        <view class="ikz-address-box">
          {{form_data.hope_arrive}} 送达
        </view>
      </view>
      <view class="ikz-tips">
        <view class="ikz-tips-item">
          <view class="ikz-tips-help">
            <view class="ikz-tips-help-title">
              帮助内容
            </view>
            <view class="ikz-tips-help-content">
              {{form_data.information}}
            </view>
          </view>
        </view>
        <view class="ikz-tips-item">
          <view class="ikz-tips-price-title">
            价格
          </view>
          <view class="ikz-tips-price">
            ￥{{ form_data.price }}
          </view>
        </view>
      </view>
    </block>

    <!-- type == 1 -->
    <!-- type == 2 -->
    <block v-if="form_data.type == 2">
      <view class="ikz-address ikz-after">
        <image class="ikz-address-icon" src="/static/getorder/address.png" />
        <view class="ikz-address-box">
          <view class="ikz-address-title">
            {{address_default.name}} {{address_default.mobile}}
          </view>
          <view class="ikz-address-tips">
            {{address_default.group_name}} {{address_default.detail}}
          </view>
        </view>
      </view>
      <view class="ikz-address ikz-after">
        <image class="ikz-address-icon" style="width: 40rpx;" src="/static/getorder/time.png" />
        <view class="ikz-address-box">
          {{form_data.hope_arrive}} 送达
        </view>
      </view>
      <view class="ikz-take" v-for="(item,index) in form_data.express_temp" :key="index">
        <image class="ikz-take-img" src="/static/campus/box.png"></image>
        <view class="ikz-take-center">
          <view class="ikz-take-title">
            {{item.type}}：￥{{item.price}}
          </view>
          <view class="ikz-take-tips">
            {{item.desc}}
          </view>
        </view>
        <view class="ikz-take-right">
          <view style="width: 50rpx;height: 50rpx;">
          </view>
          <view class="ikz-take-num">x{{item.number||''}}</view>
          <view style="width: 50rpx;height: 50rpx;">
          </view>
        </view>
      </view>
      <view class="ikz-tips">
        <view class="ikz-tips-item">
          <view class="ikz-tips-help">
            <view class="ikz-tips-help-title">
              取件信息
            </view>
            <view class="ikz-tips-help-content">
              {{form_data.information}}
            </view>
          </view>
        </view>

      </view>
    </block>

    <!-- type == 2 -->

    <!-- type == 3 -->
    <block v-if="form_data.type == 3">
      <view class="ikz-address ikz-after">
        <image class="ikz-address-icon" style="width: 40rpx;" src="/static/campus/game.png" />
        <view class="ikz-address-box">
          {{form_data.game_platform_name}}
        </view>
      </view>
      <view class="ikz-address ikz-after">
        <image class="ikz-address-icon" style="width: 40rpx;" src="/static/getorder/time.png" />
        <view class="ikz-address-box">
          {{form_data.game_time}}
        </view>
      </view>
      <view class="ikz-tips">
        <view class="ikz-tips-item">
          <view class="ikz-tips-help">
            <view class="ikz-tips-help-title">
              游戏信息
            </view>
            <view class="ikz-tips-help-content">
              {{form_data.information}}
            </view>
          </view>
        </view>
        <view class="ikz-tips-item">
          <view class="ikz-tips-price-title">
            游戏ID
          </view>
          <view class="ikz-tips-price">
            {{ form_data.game_id }}
          </view>
        </view>
        <view class="ikz-tips-item">
          <view class="ikz-tips-price-title">
            抢单限制
          </view>
          <view class="ikz-tips-price">
            {{ form_data.receive_limit }}
          </view>
        </view>
        <view class="ikz-tips-item">
          <view class="ikz-tips-price-title">
            价格
          </view>
          <view class="ikz-tips-price">
            ￥{{ form_data.price }}
          </view>
        </view>
      </view>
    </block>

    <!-- type == 3 -->

    <!-- type == 4 -->
    <block v-if="form_data.type == 4">
      <view class="ikz-address ikz-after">
        <image class="ikz-address-icon" src="/static/getorder/address.png" />
        <view class="ikz-address-box">
          <view class="ikz-address-title">
            {{address_default.name}} {{address_default.mobile}}
          </view>
          <view class="ikz-address-tips">
            {{address_default.group_name}} {{address_default.detail}}
          </view>
        </view>
      </view>
      <view class="ikz-address ikz-after">
        <image class="ikz-address-icon" style="width: 40rpx;" src="/static/getorder/time.png" />
        <view class="ikz-address-box">
          {{form_data.lease_duration}}归还
        </view>
      </view>
      <view class="ikz-address ikz-after">
        <image class="ikz-address-icon" style="width: 40rpx;" src="/static/getorder/time.png" />
        <view class="ikz-address-box">
          预计{{form_data.hope_arrive}}交货
        </view>
      </view>
      <view class="ikz-tips">
        <view class="ikz-tips-item">
          <view class="ikz-tips-help">
            <view class="ikz-tips-help-title">
              租借物品需求
            </view>
            <view class="ikz-tips-help-content">
              {{form_data.information}}
            </view>
          </view>
        </view>
        <view class="ikz-tips-item">
          <view class="ikz-tips-price-title">
            价格
          </view>
          <view class="ikz-tips-price">
            ￥{{ form_data.price }}
          </view>
        </view>
      </view>
    </block>

    <!-- type == 4 -->
    <!-- type == 5 -->
    <block v-if="form_data.type == 5">
      <view class="ikz-tips">
        <view class="ikz-tips-item">
          <view class="ikz-tips-price-title">
            下载链接
          </view>
          <view class="ikz-tips-price">
            {{ form_data.down_url }}
          </view>
        </view>
        <view class="ikz-tips-item">
          <view class="ikz-tips-price-title">
            收货邮箱
          </view>
          <view class="ikz-tips-price">
            {{ form_data.receive_email }}
          </view>
        </view>
        <view class="ikz-tips-item">
          <view class="ikz-tips-price-title">
            价格
          </view>
          <view class="ikz-tips-price">
            ￥{{ form_data.price }}
          </view>
        </view>
      </view>
    </block>

    <!-- type == 5 -->
    <!-- type == 6 -->
    <block v-if="form_data.type == 6">
      <view class="ikz-address ikz-after">
        <image class="ikz-address-icon" src="/static/getorder/address.png" />
        <view class="ikz-address-box">
          <view class="ikz-address-title">
            {{address_default.name}} {{address_default.mobile}}
          </view>
          <view class="ikz-address-tips">
            {{address_default.group_name}} {{address_default.detail}}
          </view>
        </view>
      </view>
      <view class="ikz-tips">
        <view class="ikz-tips-item">
          <view class="ikz-tips-help">
            <view class="ikz-tips-help-title">
              帮助内容
            </view>
            <view class="ikz-tips-help-content">
              {{form_data.information}}
            </view>
          </view>
        </view>
        <view class="ikz-tips-item">
          <view class="ikz-tips-price-title">
            价格
          </view>
          <view class="ikz-tips-price">
            ￥{{ form_data.price }}
          </view>
        </view>
      </view>
    </block>

    <!-- type == 6 -->
    <view class="ikz-tips">
      <view class="ikz-tips-item ikz-afters" @click="showRaward">
        <view class="ikz-tips-price-title">
          赏金：提高接单率
        </view>
        <view class="ikz-tips-price" style="margin-right: 20px;">
          {{form_data.reward?'￥':''}}{{ form_data.reward||'选择赏金' }}
        </view>
      </view>
    </view>

    <!-- 取快递 -->

    <view style="height:230rpx">
    </view>
    <view class="ikz-bottom">
      <view class="ikz-bottom-box">
        <view class="ikz-bottom-price">￥{{ form_data.total_fee }}</view>
        <view class="ikz-bottom-btn" @click="submitForm">立即支付</view>
      </view>
    </view>
    <view class="ikz-reward" v-show="reward_status">
      <view class="ikz-reward-box">
        <view class="ikz-reward-title">
          选择赏金
        </view>
        <view class="ikz-reward-item">
          <view class="ikz-reward-price" v-for="(item,index) in money_reward.list" :key="index"
            @click="selectRaward(index)" :style="reward_index == index?'color:#F8C66D;border-color:#F8C66D' : ''">
            ￥{{item.value}}
          </view>
        </view>
        <view class="ikz-reward-input">
          <view class="ikz-reward-input-box" @click="selectRaward(-1)"
            :style="reward_index == -1?'border-color:#F8C66D' : ''">
            <input @input="rewardPrice" v-model="reward_input" class="ikz-reward-inputs" placeholder="请输入赏金金额" />
          </view>
        </view>
        <view class="ikz-reward-tips">
          注：赏金最小金额{{ money_reward.min_run_fee }}元，最大金额{{ money_reward.max_run_fee }}元，赏金支付不退
        </view>
        <view class="ikz-reward-bottom">
          <view class="ikz-reward-cancel" @click="rewardFalse">
            取消选择
          </view>
          <view class="ikz-reward-confirm" @click="rewardSubmit">
            确认选择
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import ikzLoading from '@/pages/Component/Public/Loading/loading.vue';
  import ikzTopbg from '@/pages/Component/Public/Topbg/public/topbg/topbg.vue';
  import ikzUpdata from '@/pages/Component/Public/Updata/public/updata/updata.vue';
  var app = getApp();
  import ikz from '@/pages/Common/tools.js';
  export default {
    components: {
      ikzLoading,
      ikzTopbg,
      ikzUpdata
    },
    data() {
      return {
        loading_css: {
          display: 'flex',
        },
        reward_status: false,
        form_data: {},
        address_default: {},
        money_reward: {},
        reward_index: '999',
        reward_input: '',
        up_status: 2,
        template_id:{},
      }
    },
    onLoad(options) {
      this.templateId((res)=>{
        this.loading_css.display = 'none';
      });
      this.form_data = options;
      this.address_default = app.globalData.user_address.address_default;
      this.money_reward = app.globalData.money_reward;
      if (this.form_data.type == 2) {
        this.form_data.express = this.form_data.express_temp;
        this.form_data.express_temp = JSON.parse(this.form_data.express_temp);
      }
	  console.log(options)
      
      this.$forceUpdate();
    },
    onShow() {
      this.up_status = 2;
    },
    created() {
      // var that = this;
    },
    methods: {
      //获取模板参数 
      templateId(fn){
        var path = '/xyb/wechat_mini_push/template_id_list';
        var data = {
          
        }
        ikz.post(path,data,(res)=>{
          if(res.data.code){
            this.template_id = res.data.data;
			console.log("template_id的值",this.template_id);
          }else{
            uni.showModal({
              title: '提示',
              content: res.data.msg,
              showCancel: false,
              success: function(res) {}
            });
          }
          fn();
        })
      },
      //取消选择
      rewardFalse() {
        this.reward_index = '999';
        this.form_data.reward = '';
        this.reward_input = '';
        this.$forceUpdate();
        this.totalPrice();
        this.reward_status = false;
      },
      //赏金确认选择
      rewardSubmit() {
        if (this.reward_index == '999') {
          wx.showToast({
            title: '请选择或输入赏金',
            icon: 'error',
            duration: 2000
          })
          return
        }
        if (this.reward_index == -1) {
          console.log(this.reward_input)
          if (parseFloat(this.reward_input) >= parseFloat(this.money_reward.min_run_fee) && parseFloat(this
              .reward_input) <= parseFloat(this.money_reward.max_run_fee)) {
            this.form_data.reward = this.reward_input;
            this.totalPrice();
            this.reward_status = false;
          } else {
            wx.showToast({
              title: '请输入正确金额赏金',
              icon: 'error',
              duration: 2000
            })
            return
          }
          
        } else {
          this.form_data.reward = this.money_reward.list[this.reward_index].value;
          this.totalPrice();
          this.reward_status = false;
        }
      },
      //记录输入的赏金
      rewardPrice(e) {
        //正则表达试
        e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || ''
        //重新赋值给input
        this.$nextTick(() => {
          this.reward_input = e.target.value
        })
      },
      //计算总价
      totalPrice() {
        this.form_data.total_fee = (parseFloat(this.form_data.total_price) + parseFloat(this.form_data.reward || 0)).toFixed(2);
      },
      //弹出赏金
      showRaward() {
        this.reward_status = true
      },
      //选择赏金
      selectRaward(index) {
        this.reward_index = index;
      },

      //不同意
      cancelTreaty() {
        //退出程序
        // plus.runtime.quit();
      },
      upData() {
        
        var path = '/xyb/order/create';
        if (this.form_data.type == 1) {
          var data = {
            type: this.form_data.type,
            start: this.form_data.start,
            destination: this.form_data.destination,
            hope_arrive: this.form_data.hope_arrive,
            information: this.form_data.information,
            price: this.form_data.price,
            remarks: this.form_data.remarks,
            reward: this.form_data.reward,
            total_fee: this.form_data.total_fee,
            annex_information_images: this.form_data.annex_information_images,
          }
        } else if (this.form_data.type == 2) {
          var data = {
            type: this.form_data.type,
            start: this.form_data.start,
            destination: this.form_data.destination,
            hope_arrive: this.form_data.hope_arrive,
            express: this.form_data.express,
            information: this.form_data.information,
            reward: this.form_data.reward,
            total_fee: this.form_data.total_fee,
            annex_information_images: this.form_data.annex_information_images,
            remarks: this.form_data.remarks,
          }
        } else if (this.form_data.type == 3) {
          var data = {
            type: this.form_data.type,
            game_platform: this.form_data.game_platform,
            game_time: this.form_data.game_time,
            information: this.form_data.information,
            game_id: this.form_data.game_id,
            receive_limit: this.form_data.receive_limit,
            reward: this.form_data.reward,
            total_fee: this.form_data.total_fee,
            price: this.form_data.price,
            remarks: this.form_data.remarks,
            annex_information_images: this.form_data.annex_information_images,
          }
        } else if (this.form_data.type == 4) {
          var data = {
            type: this.form_data.type,
            destination: this.form_data.destination,
            lease_duration: this.form_data.lease_duration,
            hope_arrive: this.form_data.hope_arrive,
            information: this.form_data.information,
            reward: this.form_data.reward,
            total_fee: this.form_data.total_fee,
            price: this.form_data.price,
            remarks: this.form_data.remarks,
            annex_information_images: this.form_data.annex_information_images,
          }
        } else if (this.form_data.type == 5) {
          var data = {
            type: this.form_data.type,
            down_url: this.form_data.down_url,
            price: this.form_data.price,
            total_fee: this.form_data.total_fee,
            receive_email: this.form_data.receive_email,
            information: this.form_data.information,
            remarks: this.form_data.remarks,
            annex_information_images: this.form_data.annex_information_images,
            reward: this.form_data.reward,
          }
        } else if (this.form_data.type == 6) {
          var data = {
            type: this.form_data.type,
            destination: this.form_data.destination,
            information: this.form_data.information,
            price: this.form_data.price,
            remarks: this.form_data.remarks,
            reward: this.form_data.reward,
            total_fee: this.form_data.total_fee,
            annex_information_images: this.form_data.annex_information_images,
          }
        }
        ikz.post(path, data, res => {
          if (res.data.code) {
			  // 取到支付信息,跳转支付页面   6.11 取消跳转支付页面,在当前页面支付 
            // uni.navigateTo({  
            //   url: '/pages/Component/Module/Payment/Program/pay/index/index?orderid=' + res.data.data.id +
            //     '&total_price=' + this.form_data.total_fee
            // })
			
			uni.showLoading({
			  mask: true,
			  title: '正在请求支付...'
			})
			var path = '/xyb/order/wx_minapp_pay';
			var data = {
			  amount: this.form_data.total_fee,
			  orderid: res.data.data.id
			};
			ikz.post(path, data, res => {
			  if (res.data.code) {
			    //去支付
			    var payment = {
			      pay:res.data.data
			    }
			    ikz.pay(payment,'',(res)=>{
			      uni.redirectTo({
			        url:'/pages/Component/Module/Campus/Program/Order/myorder/index'
			      })
			      uni.hideLoading();
			    });
			  } else {
			    uni.showModal({
			      title: '提示',
			      content: res.data.msg,
			      showCancel: false,
			      success: function(res) {}
			    });
			    uni.hideLoading();
			  }
			  // if(that.pull_status){
			  // 	this.$emit("change",'pull');
			  // }
			});
			
			
          } else {
            uni.showModal({
              title: '提示',
              content: res.data.msg,
              showCancel: false,
              success: function(res) {}
            });
            this.up_status = 2;
          }
          // if(that.pull_status){ 
          // 	this.$emit("change",'pull');
          // } 
        });
      },
      //请求页面数据 
      submitForm() {
        if(this.up_status == 3){
          return false;
        }else{
          this.up_status = 3;
        }
		
        var temp_id = [
          this.template_id.delivery_complete,
          this.template_id.order_complete,
          this.template_id.receive_order_success,
        ]
        //订阅消息
        var that = this;
        uni.requestSubscribeMessage({
          tmplIds: temp_id,
          success(res) {
              that.upData();
          },
          fail(res) {
            that.up_status == 2;
            if(res.errCode == 20004){
              uni.showModal({
                title: '提示',
                content: '请前往设置打开接受通知',
                confirmText: '确定',
                success(res) {
					that.upData();
				}
              })
			
            }else{
              uni.showModal({
                title: '提示',
                content: '未订阅消息，无法接收到订单通知',
                confirmText: '确定',
                success(res) {
					  that.upData();
				}
              })
			 
            }
            
          }
        })

      },

    }
  };
</script>

<style lang="scss">
page {
  background: #f7f7f7;
  color: #333;
  font-size: 28rpx;
}

/* 公共样式 */
.ikz-afters {
  position: relative;
  
  &:after {
    content: " ";
    display: inline-block;
    height: 12rpx;
    width: 12rpx;
    border-width: 2rpx 2rpx 0 0;
    border-color: #999;
    border-style: solid;
    transform: rotate(45deg);
    position: absolute;
    right: 30rpx;
    top: 50%;
    margin-top: -6rpx;
  }
}

/* 地址卡片样式 */
.ikz-address {
  margin: 20rpx auto;
  padding: 30rpx;
  width: 90%;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  
  .ikz-address-icon {
    width: 40rpx;
    height: 40rpx;
    margin-right: 20rpx;
  }
  
  .ikz-address-box {
    flex: 1;
    
    .ikz-address-title {
      font-size: 30rpx;
      font-weight: bold;
      margin-bottom: 10rpx;
    }
    
    .ikz-address-tips {
      font-size: 26rpx;
      color: #666;
    }
  }
}

/* 信息卡片样式 */
.ikz-tips {
  margin: 30rpx auto;
  width: 90%;
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
  
  .ikz-tips-item {
    padding: 25rpx 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #f5f5f5;
    
    &:last-child {
      border-bottom: none;
    }
    
    .ikz-tips-help-title {
      font-size: 30rpx;
      font-weight: bold;
      margin-bottom: 15rpx;
    }
    
    .ikz-tips-help-content {
      font-size: 26rpx;
      color: #666;
      line-height: 1.6;
    }
    
    .ikz-tips-price-title {
      font-weight: bold;
    }
    
    .ikz-tips-price {
      color: #FF5F15;
      font-weight: bold;
    }
  }
}

/* 快递包裹样式 */
.ikz-take {
  margin: 30rpx auto;
  width: 90%;
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  
  .ikz-take-img {
    width: 80rpx;
    height: 80rpx;
    margin-right: 20rpx;
  }
  
  .ikz-take-center {
    flex: 1;
    
    .ikz-take-title {
      font-size: 30rpx;
      font-weight: bold;
      margin-bottom: 10rpx;
    }
    
    .ikz-take-tips {
      font-size: 26rpx;
      color: #666;
    }
  }
  
  .ikz-take-right {
    display: flex;
    align-items: center;
    
    .ikz-take-num {
      margin: 0 20rpx;
      font-size: 28rpx;
      color: #FF5F15;
      font-weight: bold;
    }
  }
}

/* 底部操作栏 */
.ikz-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120rpx;
  background: #fff;
  box-shadow: 0 -4rpx 12rpx rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  
  .ikz-bottom-box {
    width: 90%;
    height: 90rpx;
    background: linear-gradient(90deg, #FF5F15, #FF8F1F);
    border-radius: 45rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40rpx;
    
    .ikz-bottom-price {
      font-size: 34rpx;
      color: #fff;
      font-weight: bold;
    }
    
    .ikz-bottom-btn {
      font-size: 32rpx;
      color: #fff;
      font-weight: bold;
    }
  }
}

/* 赏金弹窗样式 */
.ikz-reward {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  
  .ikz-reward-box {
    width: 85%;
    background: #fff;
    border-radius: 20rpx;
    overflow: hidden;
    
    .ikz-reward-title {
      padding: 30rpx;
      font-size: 32rpx;
      font-weight: bold;
      text-align: center;
      border-bottom: 1rpx solid #f5f5f5;
    }
    
    .ikz-reward-item {
      padding: 30rpx;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      
      .ikz-reward-price {
        width: 30%;
        margin-bottom: 20rpx;
        padding: 20rpx 0;
        text-align: center;
        border: 1rpx solid #ddd;
        border-radius: 10rpx;
        font-size: 28rpx;
        
        &:active {
          background: #f5f5f5;
        }
      }
    }
    
    .ikz-reward-input {
      padding: 0 30rpx 30rpx;
      
      .ikz-reward-input-box {
        border: 1rpx solid #ddd;
        border-radius: 10rpx;
        padding: 20rpx;
      }
    }
    
    .ikz-reward-tips {
      padding: 0 30rpx 30rpx;
      font-size: 24rpx;
      color: #999;
      text-align: center;
    }
    
    .ikz-reward-bottom {
      display: flex;
      border-top: 1rpx solid #f5f5f5;
      
      .ikz-reward-cancel, .ikz-reward-confirm {
        flex: 1;
        text-align: center;
        padding: 30rpx 0;
        font-size: 30rpx;
      }
      
      .ikz-reward-cancel {
        color: #666;
        border-right: 1rpx solid #f5f5f5;
      }
      
      .ikz-reward-confirm {
        color: #FF5F15;
        font-weight: bold;
      }
    }
  }
}
</style>
